<!DOCTYPE html>
<html>
<div id="httpCfg" class="portlet-body form">
  <div class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">基本配置</span>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">字符集编码</label>
      <div class="col-sm-8">
        <select name="charset" field="charset" required class="form-control select2">
          <option value="UTF-8">UTF-8编码</option>
          <option value="GBK">GBK编码</option>
        </select>
      </div>
    </div>

    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">是否启用</label>
      <div class="col-sm-8">
        <select name="enable" field="enable" required class="form-control select2">
          <option value="true">是</option>
          <option value="false">否</option>
        </select>
      </div>
    </div>

    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">服务类名</label>
      <div class="col-sm-8">
        <input id="dealclass_txt" name="exterClass" field="exterClass" required class="form-control"/>
      </div>
    </div>
  </div>


  <div id="in_type_div" class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">线程池配置</span>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">最大线程数</label>
      <div class="col-sm-8">
        <input id="maxSize_txt" name="maxSize" field="maxSize" type="number" min="1" required class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">核心线程数</label>
      <div class="col-sm-8">
        <input id="coreSize_txt" name="coreSize" field="coreSize" type="number" min="1" required class="form-control"/>
      </div>
    </div>

    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">缓冲队列大小</label>
      <div class="col-sm-8">
        <input id="capacity_txt" name="capacity" field="capacity" type="number" min="1" required class="form-control"/>
      </div>
    </div>
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">空闲线程存活时间(秒)</label>
      <div class="col-sm-8">
        <input id="aliveTime_txt" name="aliveTime" field="aliveTime" type="number" min="1" required
               class="form-control"/>
      </div>
    </div>
  </div>
  <div id="out_type_div">
    <div class="form-group col-sm-6">
      <label class="control-label col-sm-4 is-required">连接超时(秒)</label>
      <div class="col-sm-8">
        <input id="connTimeOut_txt" name="connTimeOut" field="connTimeOut" type="number" min="1" required class="form-control"/>
      </div>
    </div>
  </div>

  <div id="head_conifg_div" class="clear">
    <div class="portlet-title" style="margin-bottom: 10px;">
      <div class="caption font-red">
        <i class="icon-settings font-red" style="margin-left: 20px;"></i> <span
          class="caption-subject bold uppercase">自定义属性</span>
      </div>
    </div>
    <div class="form-actions right">
      <a id="addHead_btn" type="button" class="btn btn-sm btn-danger fa fa-plus" style="margin:0 20px 20px;">添加</a>
    </div>
    <div id="default_key_value_div">
      <div class="form-group col-sm-5">
        <label class="control-label col-sm-4">键</label>
        <div class="col-sm-8">
          <input keyType="key" type="text" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-5">
        <label class="control-label col-sm-4" style="margin-bottom: 10px;">值</label>
        <div class="col-sm-8">
          <input keyType="value" type="text" class="form-control"/>
        </div>
      </div>
      <div class="form-group col-sm-2">
        <a class="btn btn-sm btn-warning fa fa-remove" onclick="removeHead(this)" type="button">删除</a>
      </div>
    </div>
  </div>
</div>
<script th:inline="javascript">
  $(function () {
    //根据类型初始化页面元素
    initDom();

    $("#addHead_btn").bind("click", function () {
      $("#head_conifg_div").append(createHtml());
    });
  });

  //根据类型初始化页面元素
  function initDom() {
    var type = $("#commType").val();
    if ("IN" == type) {
      $("#in_type_div").show();
      $("#out_type_div").remove();
    }

    var entry = httpEntry;
    if (entry) {
      $("#default_key_value_div").remove();
      entry.forEach(function(item){
        $("#head_conifg_div").append(createHtml(item.key, item.value));
      })
    }
  }

  //创建键值数据
  function createHtml(key, value) {
    var html = '<div class="httpParent">' +
      '<div  class="form-group col-sm-5" style="margin-bottom: 10px;">' +
      '<label class="control-label col-sm-4">键</label>' +
      '<div class="col-sm-8" style="margin-bottom: 10px;">';

    if (key) {
      html += '<input  keyType="key" value="' + key + '" type="text" class="form-control"/>';
    } else {
      html += '<input  keyType="key" type="text" class="form-control"/>';
    }

    html += '</div></div>' +
      '<div  class="form-group col-sm-5" style="margin-bottom: 10px;">' +
      '<label class="control-label col-sm-4" style="margin-bottom: 10px;">值</label>' +
      '<div class="col-sm-8">';
    if (value) {
      html += '<input keyType="value" value="' + value + '" type="text" class="form-control"/>';
    } else {
      html += '<input keyType="value" type="text" class="form-control"/>';
    }
    html += '</div></div>' +
      '<div class="form-group col-sm-2">' +
      '<a class="btn btn-warning btn-sm fa fa-remove" onclick="removeHead(this)" type="button">删除</a>' +
      '</div>'
    '</div></div>';
    return html;
  }

  //删除头部信息
  function removeHead(opt) {
    var parent = $(opt).parents('.httpParent');
    $(parent).remove();
  }

</script>